<template>
    <PageCard title="积分活动列表">
        <template #actions>
            <el-button class="ed-button ed_black-bottom ed-button36" v-has="'integral:activity:add'" @click="add()"><svg-icon icon-class="add-svg"/>新建活动</el-button>
        </template>
        <ApiTable :api="load" ref="table">
            <el-table-column type="index" width="80" label="序号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="title" label="活动主题"/>
            <el-table-column :show-overflow-tooltip="true" prop="" label="活动时间">
                <template slot-scope="scope">
                    {{scope.row.begin}} - {{scope.row.end}}
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="" label="活动积分" class="one">
                <template slot-scope="scope">
                    {{scope.row.pointRule ? scope.row.pointRule.quantity : ""}}
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="address" label="活动地点"/>
            <el-table-column :show-overflow-tooltip="true" prop="director" label="活动负责人"/>
            <el-table-column :show-overflow-tooltip="true" prop="directorMobile" label="活动负责人电话"/>
            <el-table-column :show-overflow-tooltip="true" prop="qrTxt" label="活动二维码（点击可下载）">
                <template slot-scope="scope">
                    <ed-qr-code v-if="scope.row.id" :id="scope.row.id" :url="scope.row.qrTxt" :name="scope.row.title"></ed-qr-code>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="" label="操作" width="300px">
                <template slot-scope="scope">
                    <el-button class="ed-table-bottom ed_black_border" v-has="'integral:activity:detail'" @click="seeRow(scope.row)">查看详情</el-button>
                    <el-button class="ed-table-bottom ed_black_border" v-has="'integral:activity:update'" @click="updateRow(scope.row)">编辑</el-button>
                    <el-button class="ed-table-bottom ed_delete_border" v-has="'integral:activity:delete'" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </ApiTable>
<!--        <el-button class="ed-table-bottom ed_black_border">编辑</el-button>-->
<!--        <el-button class="ed-table-bottom ed_green_border" disabled>二维码</el-button>-->
<!--        <el-button class="ed-table-bottom ed_blue_border">配置</el-button>-->
<!--        <el-button class="ed-table-bottom ed_delete_border">删除</el-button>-->
    </PageCard>
</template>

<script>
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdTable from "src/components/EdTable.vue";
    import EdQrCode from "src/components/EdQrCode.vue";
    import {delActivity ,activityList} from "src/api/activity"
    export default {
        name: "IntegralActivity",
        components:{
            EdTable,
            EdQrCode,
            Page, PageCard, ApiTable
        },
        data(){
            return{
                dataApi:{
                    url:"",
                    pages:0 // 页数
                }
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:activityList,
            add(){
                this.$router.push({
                    path: '/integral/activity-create'
                })
            },
            seeRow(row){
                this.$router.push({
                    path: '/integral/activity-query',
                    query: {id: row.id}
                })
            },
            updateRow(row){
                this.$router.push({
                    path: '/integral/activity-update',
                    query: {id: row.id}
                })
            },
            del(row){
                delActivity({id:row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '活动已删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            }
        }
    }
</script>

<style  lang="scss">
    .cell-left{
        .el-table{
            .el-table__header-wrapper{
                .el-table__header{
                    .el-table_1_column_4{
                        .cell{
                            margin-left: 30px !important;
                        }
                    }
                }
            }
            .el-table__body-wrapper{
                .el-table__body{
                    .el-table__row{
                        .el-table_1_column_4{
                            .cell{
                                margin-left: 30px !important;
                            }
                        }
                    }
                }
            }
        }
    }

</style>